<template>
    <div class="app-container">
        <el-card class="filter-container" shadow="never">
            <div style="margin-top:15px">
                <el-button style="float:right; margin-right: 15px" type="primary" @click="handleSearchList()" size="small">
                    Search
                </el-button>
            </div>
            <div style="margin-top: 15px; max-width:80%;">
                <el-form :inline="true" :model="listQuery" size="small">
                    <el-form-item label="Version Number:">
                        <el-input style="width: 203px" v-model="listQuery.versionCode"
                            placeholder="Please enter"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
        <div class="table-container">
            <el-table ref="returnReasonTable" :data="list" style="width: 100%;" v-loading="listLoading" border>
                <el-table-column label="Serial Number" width="180" align="center">
                    <template slot-scope="scope">{{ scope.row.serialNo }}</template>
                </el-table-column>
                <el-table-column label="Version Name" width="140" align="center">
                    <template slot-scope="scope">{{ scope.row.appName }}</template>
                </el-table-column>
                <el-table-column label="Client" width="140" align="center">
                    <template slot-scope="scope">{{ scope.row.source }}</template>
                </el-table-column>
                <el-table-column label="Version Number" width="140" align="center">
                    <template slot-scope="scope">{{ scope.row.versionCode }}</template>
                </el-table-column>
                <el-table-column label="Version Sequence" align="center">
                    <template slot-scope="scope">{{ scope.row.versionSerialNo }}</template>
                </el-table-column>
                <el-table-column label="Hide" width="140" align="center">
                    <el-switch slot-scope="scope" v-model="switchValue[scope.$index]"  @change="(value)=>{onchange(scope.row,value)}" active-value="1"
    inactive-value="0">
                    </el-switch>
                </el-table-column> 
            </el-table>
        </div>
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper" :current-page.sync="listQuery.pageNum"
                :page-size="listQuery.pageSize" :page-sizes="[10]" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import {fetchComplianceList,fetchEnable} from '@/api/compliance';
const defaultListQuery = {
    pageNum: 1,
    pageSize: 10,
    versionCode: null
};
export default {
    name: 'returnReasonList',
    data() {
        return {
            list: null,
            total: null,
            listLoading: true,
            switchValue:[],
            listQuery: Object.assign({}, defaultListQuery),
        };
    },
    created() {
        this.getList();
    },
    filters: {},
    methods: {
        handleSearchList() {
            this.listQuery.pageNum = 1;
            this.getList();
        },
        handleSizeChange(val) {
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.listQuery.pageNum = val;
            this.getList();
        },
        getList() {
            this.listLoading = true;
            const param = {
                "swithType": 2,
                "versionCode": this.listQuery.versionCode,
                "page": this.listQuery.pageNum,
                "pageSize": this.listQuery.pageSize
            };
            fetchComplianceList(param).then(response => {
                this.listLoading = false;
                this.list = response.data.switchDtos;
                this.total = response.data.total;
                if (this.list !== null) {
                    for (let index = 0; index < this.list.length; index++) {
                        this.$set(this.switchValue,index,this.list[index].enableFlag+"")
                    }
                }
            });
        },
        onchange(row, value) {
            const param = {
                "enableFlag":parseInt(value),
                "serialNo": row.serialNo,
            };
            fetchEnable(param).then(response => {
               // this.getList();
            });
        },
    },
}
</script>
<style scoped>
.input-width {
    width: 80%;
}
</style>
